<!--
 * @Date: 2022-06-15 09:27:31
 * @Author: 陶子
 * @LastEditTime: 2022-06-16 14:21:25
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\warehouseManagement\goodsManagement\SearchTag.vue
 * @pageName: 这是--(物品管理——筛选)--页面
-->
<template>
  <div class="search-content wrap-apply" :style="{top: GLOBAL.currentEnvironment ? '0' : ''}" v-show="showSearchTag">
    <Search ref="topSearch" class="search" placeholder="出入库编号 | 物品名称" :isAdd="false" :isScreen="false" :isType="false"></Search>
    <div class="searchBox">
      <van-cell-group>
        <p class="label FormTit"><span></span>物品编号</p>
        <van-field v-model="filterForm.serialNumber" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>物品名称</p>
        <van-field v-model="filterForm.serialName" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>规格</p>
        <van-field v-model="filterForm.serialSpecifications" placeholder="请输入" />
        <div class="bottomLine"></div>
      </van-cell-group>

      <van-cell-group>
        <p class="label FormTit"><span></span>物品属性</p>
        <van-field-select-picker label="" placeholder="请选择" :supportClear='true' v-model="filterForm.serialProperties" :columns="goodsProperties"
          :option="{ label: 'title', value: 'value' }" @confirm="(value) => handleSelect(value, 'serialProperties')" :key="'serialProperties'"/>
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>单据类型</p>
        <van-field-select-picker label="" placeholder="请选择" :supportClear='true' v-model="filterForm.inOutType" :columns="orderTypes"
          :option="{ label: 'title', value: 'value' }" @confirm="(value) => handleSelect(value, 'inOutType')" :key="'inOutType'"/>
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>出入库类型</p>
        <van-field-select-picker label="" placeholder="请选择" :supportClear='true' v-model="filterForm.warehouseType" :columns="warehousingTypes"
          :option="{ label: 'itemText', value: 'itemValue' }" @confirm="(value) => handleSelect(value, 'warehouseType')" :key="'warehouseType'"/>
        <div class="bottomLine"></div>
      </van-cell-group>

      <van-cell-group>
        <p class="label FormTit"><span></span>领送人</p>
        <van-field
          :is-link="!filterForm.persionNames"
          readonly
          name="picker"
          v-model="filterForm.persionNames"
          @click="onShowContactPickers('persion')"
          placeholder="请选择"
        >
          <div slot="right-icon" v-show="filterForm.persionNames" @click.stop="onClearChooseUsers('persion')"><van-icon name="clear" size="16px" /></div>
        </van-field>
        <div class="bottomLine"></div>
      </van-cell-group>

      <van-cell-group>
        <p class="label FormTit"><span></span>创建人</p>
        <van-field
          :is-link="!filterForm.createByNames"
          readonly
          name="picker"
          v-model="filterForm.createByNames"
          @click="onShowContactPickers('createBy')"
          placeholder="请选择"
        >
          <div slot="right-icon" v-show="filterForm.createByNames" @click.stop="onClearChooseUsers('createBy')"><van-icon name="clear" size="16px" /></div>
        </van-field>
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>更新人</p>
        <van-field
          :is-link="!filterForm.updateByNames"
          readonly
          name="picker"
          v-model="filterForm.updateByNames"
          @click="onShowContactPickers('updateBy')"
          placeholder="请选择"
        >
          <div slot="right-icon" v-show="filterForm.updateByNames" @click.stop="onClearChooseUsers('updateBy')"><van-icon name="clear" size="16px" /></div>
        </van-field>
        <div class="bottomLine"></div>
      </van-cell-group>

      <van-cell-group>
        <p class="label FormTit"><span></span>更新时间</p>
        <van-field readonly name="picker" :is-link="!filterForm.updateTimeStr" @click="onShowCalendar('update')" placeholder="请选择" v-model="filterForm.updateTimeStr">
          <div slot="right-icon" v-show="filterForm.updateTimeStr" @click.stop="onCancelTime('update')"><van-icon name="clear" size="16px" /></div>
        </van-field>
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <p class="label FormTit"><span></span>创建时间</p>
        <van-field readonly name="picker" :is-link="!filterForm.createTimeStr" @click="onShowCalendar('create')" placeholder="请选择" v-model="filterForm.createTimeStr">
          <div slot="right-icon" v-show="filterForm.createTimeStr" @click.stop="onCancelTime('create')"><van-icon name="clear" size="16px" /></div>
        </van-field>
        <div class="bottomLine"></div>
      </van-cell-group>

    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="btnCancel">重置</span>
      <span class="btnconfirm" @click="btnConfirm">确定</span>
    </div>
    <van-calendar v-model="showCalendar" :min-date="minDate" :default-date="defaultDate" type="range" @confirm="onConfirmTime" :allow-same-day="true" color="#1890FF"/>
    <contact-pickers :key="userType" :visible="showContactPickers" :max="5" @closePicker="onCloseContactPickers" @confirm="confirmChooseUsers"></contact-pickers>
  </div>
</template>

<script>
import { 
  ajaxGetDictItems
} from "@/api/api";
import { 
  inventoryOrderTypeList,
  outboundOrderTypeList
} from "@/api/mobile";
import VanFieldSelectPicker from "@/components/ActionSheet/VanFieldSelectPicker";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import Search from "@/components/search";
import moment from "moment";
import store from '@/store'

export default {
  name: "search",
  components: {
    Search,
    VanFieldSelectPicker,
    ContactPickers
  },
  data() {
    return {
      activeIndex: 0,
      showSearchTag: false,
      goodsProperties: [],
      orderTypes: [
        {title: '入库单', value: '0'},
        {title: '出库单', value: '1'}
      ],
      warehousingTypes: [],
      /***** */
      filterForm: {
        serialNumber: '',
        serialName:'',
        serialSpecifications: '',

        serialProperties: '',
        inOutType:'',
        warehouseType: '',

        persion: '',
        persionNames:'',
        createBy: '',
        createByNames:'',
        updateBy: '',
        updateByNames:'',

        createTime: [],
        createTimeStr: '', 
        updateTime: [],
        updateTimeStr: '',
      },
      showCalendar: false,
      defaultDate: [new Date(), null],
      minDate: new Date(2000, 0, 1),
      timeType: 'update', //update、 create
      showContactPickers: false,
      userType: 'persion' // persion createBy updateBy
    };
  },
  computed: {},
  mounted() {},
  created() {
    store.commit('SET_CURRENT_PREFIX', '/jksaas-produce/produce')
    // 获取物品属性
    ajaxGetDictItems('SERIAL_PROPERTIES').then((res) => {
      if(res.code == 200 && res.result) {
        this.goodsProperties = res.result
      }
    });
    // 入库单类型
    inventoryOrderTypeList().then((res) => {
      if(res.code == 200 && res.result) {
        let inOrderList = res.result.map((ele) => {
          return {
            ...ele,
            type: 0
          }
        })
        this.warehousingTypes = [...this.warehousingTypes, ...inOrderList]
      }
    });
    // 出库单类型
    outboundOrderTypeList().then((res) => {
      if(res.code == 200 && res.result) {
        let outOrderList = res.result.map((ele) => {
          return {
            ...ele,
            type: 1
          }
        })
        this.warehousingTypes  =  [...this.warehousingTypes, ...outOrderList]
      }
    });
  },
  methods: {
    moment,
    // 人员选择 清空
    onClearChooseUsers(userType) {
      this.userType = userType
      let userNamesKey = this.userType + 'Names'

      this.filterForm[userNamesKey] = ''; // 人员name字符串
      this.filterForm[this.userType] = ''; //人员id
    },
    // 人员选择 确认选择回调
    confirmChooseUsers(val, selectedList, judge) {
      if (judge) {
        this.showContactPickers = false;
        return;
      }
      let userNamesKey = this.userType + 'Names'
      let arr = [];

      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }

      this.filterForm[userNamesKey] = arr.join(","); // 人员name字符串
      this.filterForm[this.userType] = val ? val : ""; //人员id

      this.showContactPickers = false;
    },
    // 人员选择 关闭
    onCloseContactPickers(userType) {
      this.userType = userType
      this.showContactPickers = false
    },
    // 人员选择 打开
    onShowContactPickers(userType) {
      this.userType = userType
      this.showContactPickers = true
    },
    // 时间选项 清空
    onCancelTime(timeType) {
      this.timeType = timeType

      let listkey  = this.timeType + 'Time'
      let strkey = this.timeType + 'TimeStr'
      
      this.filterForm[listkey] = []
      this.filterForm[strkey] = ''
    },
    // 时间选择器 确认
    onConfirmTime(date) {
      const [start, end] = date;
      this.showCalendar = false;

      let listkey  = this.timeType + 'Time'
      let strkey = this.timeType + 'TimeStr'
      
      this.filterForm[listkey] = date
      this.filterForm[strkey] = `${this.moment(start).format("YYYY-MM-DD")} - ${this.moment(end).format("YYYY-MM-DD")}`;
    },
    // 时间选择器 打开
    onShowCalendar(timeType) {
      this.timeType = timeType      
      let listkey = this.timeType + 'Time'
      
      if(this.filterForm[listkey].length != 0) {
        this.defaultDate = this.filterForm[listkey]
      }else {
        this.defaultDate =  [new Date(), null]
      }

      this.showCalendar = true
    },
    // select选择
    handleSelect(itemReport, key) {
      if (itemReport) {
        this.filterForm[key] = itemReport.value;
        this.filterForm['inOutType'] = itemReport.type;
      } else {
        this.filterForm[key] = "";
      }
    },
    // 打开筛选
    showModal(keyword, dropdownObj, goodTypeList, categoryList, activeIndex) {
      this.showSearchTag = true;
      this.$nextTick(() => {
        this.$refs.topSearch.value = keyword;
        this.filterForm = {
          ...this.filterForm,
          ...dropdownObj,
        }
      });
    },
    // 重置筛选
    btnCancel() {
      this.$refs.topSearch.value = "";
      this.filterForm = {
        serialNumber: '',
        serialName:'',
        serialSpecifications:'',
        serialProperties: '',
        inOutType:'',
        warehouseType: '',

        persion: '',
        persionNames:'',
        createBy: '',
        createByNames:'',
        updateBy: '',
        updateByNames:'',

        createTime: [],
        createTimeStr: '', 
        updateTime: [],
        updateTimeStr: '',
      };
      this.activeIndex = 0;
    },
    // 确认筛选
    btnConfirm() {
      let {serialNumber,serialName, serialSpecifications, serialProperties, inOutType, warehouseType, persion, createBy, updateBy, createTime, updateTime} = this.filterForm
      let sureObj = {
        serialNumber: serialNumber || null,
        serialName: serialName || null,
        serialSpecifications: serialSpecifications || null,

        serialProperties: serialProperties || null,
        inOutType: inOutType || null,
        warehouseType: warehouseType || null,

        persion: persion || null,
        createBy: createBy || null,
        updateBy: updateBy || null,

        createTimeBegin: createTime.length !=0 ? this.moment(createTime[0]).format("YYYY-MM-DD") : null,
        createTimeEnd: createTime.length !=0 ? this.moment(createTime[1]).format("YYYY-MM-DD") : null,
        updateTimeBegin: updateTime.length !=0 ? this.moment(updateTime[0]).format("YYYY-MM-DD") : null,
        updateTimeEnd: updateTime.length !=0 ? this.moment(updateTime[1]).format("YYYY-MM-DD") : null,

        keyword: this.$refs.topSearch.value,
      };

      this.showSearchTag = false;      
      this.$emit("getCategory", sureObj);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
.search-content {
  position: fixed;
  top: 70px;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  z-index: 99;
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 12px;
    font-size: 32px;
    font-weight: 500;
    .btncancel {
      flex: 1;
      background: #f6f6f6;
      // border: 0.01rem solid rgba(25, 31, 37, 0.12);
      box-sizing: border-box;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
      margin-right: 1px;
      color: #191f25;
    }
    .btnconfirm {
      flex: 1;
      background: #1890ff;
      box-sizing: border-box;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      color: #ffffff;
    }
  }
}
.bottomLine {
  height: 1px;
  background-color: #f0f0f0;
  margin: 0 3px;
}
.searchBox {
  height: calc(100vh - 295px);
  overflow-y: auto;
  padding: 20px 0;
}
.dh-field {
  padding: 0 34px;
  background: #fff;
  .dh-cell.van-cell {
    padding: 10px 0 14px;
  }
  .dh-cell.van-cell--required::before {
    left: -8px;
  }
  .van-popup {
    border-radius: 20px 20px 0 0;
  }
}
.haveUnitBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.16rem;
  /deep/ .van-cell {
    padding-right: 0;
    width: 2.6rem;
  }
  /deep/ .van-field__control {
    max-width: 3rem;
  }
}
</style>